<template>
  <div class="cooperateHome">
    <div class="cardBox">
      <div class="cardItem">
        <div class="cardItemTitle">今日收件</div>
        <div class="cardContent">{{statistics.today_collect}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle red">今日寄件</div>
        <div class="cardContent">{{statistics.today_send}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle blue">近7天收件</div>
        <div class="cardContent">{{statistics.lately_week_collect}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle blue">近7天寄件</div>
        <div class="cardContent">{{statistics.lately_week_send}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle">本月收件</div>
        <div class="cardContent">{{statistics.this_month_collect}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle">本月寄件</div>
        <div class="cardContent">{{statistics.this_month_send}}单</div>
      </div>
    </div>
    <zyInfoPanel title="快递数据统计" :showUnfoldButton="false" class="chartArea">
      <div class="timeSelect" slot="title">
        <el-date-picker v-model="time" type="year" placeholder="选择日期"
                        @change="getData"></el-date-picker>
      </div>
      <div id="cooperate_chart" v-loading="loading"></div>
    </zyInfoPanel>
    <div class="tableArea">
      <div class="tableContent">
        <zy-title>日收寄件统计</zy-title>
        <el-table :data="dayTableData"  v-loading="loading" emptyText="暂无数据" height="240">
          <el-table-column fixed="left" align="center" type="index" label="序号" width="72"></el-table-column>
          <el-table-column v-for="item in tableList" align="center" :prop="item.name" :label="item.title"></el-table-column>
        </el-table>
      </div>
      <div class="splitArea"></div>
      <div class="tableContent">
        <zy-title>月收寄件统计</zy-title>
        <el-table :data="dayTableData"  v-loading="loading" emptyText="暂无数据" height="240">
          <el-table-column fixed="left" align="center" type="index" label="序号" width="72"></el-table-column>
          <el-table-column v-for="item in tableList" align="center" :prop="item.name" :label="item.title"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "cooperateHome",
		props: {},
		data() {
			return {
				statistics: {},
				loading: false,
				time: new Date(),
				tableList: [
					{
						title: '企业名称',
						name: 'company_name',
					},
					{
						title: '今日收件量',
						name: 'collect_count',
					},
					{
						title: '今日寄件量',
						name: 'send_count',
					},
					{
						title: '总计',
						name: 'count',
					},
				],
				dayTableData: [],
				monthTableData: [],
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			getData() {
				this.$axios.post(this.$api.c_index, {
					year: this.$Timestamp(this.time, 'year')
        }).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.statistics = data.statistics;
						this.monthTableData = data.month_list;
						this.dayTableData = data.today_list;
						let timeData = [], receiveData = [], sendData = [];
						for (var key in data.year_statistics) {
							timeData.push(key + '月');
							receiveData.push(data.year_statistics[key].collect);
							sendData.push(data.year_statistics[key].send);
						}
						this.draw(timeData, receiveData, sendData);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			draw(timeData, receiveData, sendData) {
				let that = this;
				this.myChart = this.$echarts.init(document.getElementById('cooperate_chart'));
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#9BA3AF'
							}
						},
						formatter: function (value) {
							// console.log(value)
              if(value.length>1){
	              return `${that.$Timestamp(that.time, 'year')}年${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}<br>${value[1].seriesName}：${value[1].value}`;
              }else{
	              return `${that.$Timestamp(that.time, 'year')}年${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}`;
              }
						}
					},
					legend: {
						data: ['收件', '寄件'],
						bottom: '0',
					},
					grid: {
						top: '12px',
						left: '3%',
						right: '4%',
						bottom: '20px',
						containLabel: true
					},
					xAxis: {
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: '{value}'
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(199, 203, 209, 0.5)'
							}
						},
						type: 'category',
						boundaryGap: false,
						data: timeData
					},
					yAxis: [{
						type: 'value',
						axisTick: {show: false},
						axisLine: {
							lineStyle: {
								color: 'rgba(60,121,237,.1)'
							}
						},
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: function (value) {
								return value;
							}
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(44, 55, 76, 0.15)'
							}
						}
					}],
					series: [
						{
							name: '收件',
							type: 'line',
							stack: '总量',
							data: receiveData,
							color: '#0077FB',
							lineStyle: {
								normal: {           //F86C6B
									color: '#0077FB',
									width: 4,
								}
							},
						},
						{
							name: '寄件',
							type: 'line',
							stack: '总量',
							data: sendData,
							color: '#FBDB01',
							lineStyle: {
								normal: {
									color: '#FBDB01',
									width: 4,
								}
							},
						},
					]
				};
				this.myChart.setOption(option);
			},
		},
		mounted() {
			this.getData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/home/index.less">

</style>
